<template>
    <div>
        <el-input v-model="candidate" style="width:200px" placeholder="请输入候选人">
        </el-input>
        <!-- 提交不了怎么搞？ -->
        <el-button @click="addCandidate">添加候选人</el-button>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="候选人" width="280">
            </el-table-column>
            <el-table-column prop="voter" label="投票数" width="280">
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleVote(scope.row)" type="text" size="large">投票</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

</template>
  
<script>
export default {
    //合约对象
    voteContract: undefined,
    data() {
        return {
            candidate: '',
            tableData: []
        }
    },
    methods: {
        //获取合约对象
        getContract(){
            //引入 web3.js 库
            let Web3 = require("web3")

            //创建 web3.js 实例对象（连接Ganche以太坊测试网络）
            var web3 = new Web3(new Web3.providers.HttpProvider("HTTP://127.0.0.1:7545"))

            //获取ABI接口文件并转换为JSON格式
            var contractAbi = JSON.parse('[{"constant":true,"inputs":[{"name":"_name","type":"string"}],"name":"getVoter","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"_name","type":"string"}],"name":"isExist","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_name","type":"string"}],"name":"add","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"getNames","outputs":[{"name":"","type":"string[]"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_name","type":"string"}],"name":"vote","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"}]')

            //获取合约地址
            var contractAddress = "0x9918437afDF56E90D469E08a137573fa63D0210a"

            //创建合约对象
            this.voteContract = new web3.eth.Contract(contractAbi,contractAddress)

            console.log("我被调用了");
        },

        //添加候选人按钮绑定事件处理
        addCandidate() {
            let self = this

            //调用合约添加候选人函数
            this.voteContract.methods.add(this.candidate)
            .send({from:"0xdc913Dc03d9Eb7AEc929B1389C88fa3BCd4D3CeF",gas:1500000,gasPrice:'1000000'})
            .on('receipt',function(receipt){
                console.log(receipt.status);
                self.initTableData()
            })
        },

        //投票
        handleVote(row) {
            let self = this

            //调用合约添加候选人函数
            this.voteContract.methods.vote(row.name)
            .send({from:"0xdc913Dc03d9Eb7AEc929B1389C88fa3BCd4D3CeF",gas:1500000,gasPrice:'1000000'})
            .on('receipt',function(receipt){
                console.log(receipt.status);
                self.initTableData()
            })
        },

        //初始化表数据
        initTableData() {
            //清空表数据
            this.tableData = [];

            //调用合约读取表数据
            this.voteContract.methods.getNames().call((error,names)=>{
                //遍历候选者名单
                names.forEach(name=>{
                    //获取候选者投票数
                    this.voteContract.methods.getVoter(name).call((error,voter)=>{
                        //将候选者和投票数填充到表格中
                        this.tableData.push({"name":name,"voter":voter})
                    })
                })
            })
        }
    },

    //vue生命周期函数
    mounted() {
        this.getContract()
        this.initTableData()
    }
}

</script>